<template>
    <div class="content">
        <div class="userinfo">
           <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" /> 
        </div> 
        <div class="countDownTime" :style="'color:white'">
            <div class="weui-loadmore"  :v-if="!ifSuccess">
                 <div class="weui-loading"></div>
                 <div class="weui-loadmore__tips" style="font-size:45rpx;color:white;">{{msg}}</div>
            </div>
            <p>{{time1}}:{{countDownNum}}</p>
        </div> 
        <div class='cu-btn bg-gray sm round block shadow  tips' role="button" bindtap="showModal" data-target="viewModal" style="color:grey" >
				{{tips}}
				</div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '匹配中....',
      timer: null, // 计时器名称
      time1: '00',
      tips: '预计匹配时间: 00:20',
      countDownNum: 20, // 倒计时
      ifSuccess: false,
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      counterInfo: {
        nickName: null,
        avatarUrl: null
      }
    }
  },
  methods: {
    countDown () {
      // clearInterval(this.timer)
      this.countDownNum = 20
      var _this = this
      this.timer = setInterval(function () {
        _this.countDownNum--
        wx.sendSocketMessage({
          data: JSON.stringify(
            {
              'type': 'match'
            }
          ),
          success: function (e) {
            // console.log('发送消息')
          },
          fail: function (e) {
            // console.log(e)
          }
        })
        wx.onSocketMessage(function (res) {
          console.log('对手' + res)
          if (res !== null) {
            clearInterval(_this.timer)
            var json = JSON.parse(res.data)
            _this.counterInfo.avatarUrl = json.avatarUrl
            _this.counterInfo.nickName = json.nickName
            console.log(json.avatarUrl)
            var type = 'human'
            const url = '../successMatch/main?userInfo_nickName=' + _this.userInfo.nickName + '&userInfo_avatarUrl=' + _this.userInfo.avatarUrl + '&counterInfo_nickName=' + _this.counterInfo.nickName + '&counterInfo_avatarUrl=' + _this.counterInfo.avatarUrl + '&type=' + type
            console.log(url)
            wx.navigateTo({url})
          }
        })
        if (_this.countDownNum === 12) {
          clearInterval(_this.timer)
          var robotAvatar = '/static/images/robotAvatar.jpg'
          var robotNickname = '葬爱少年'
          var type = 'robot'
          const url = '../successMatch/main?userInfo_nickName=' + _this.userInfo.nickName + '&userInfo_avatarUrl=' + _this.userInfo.avatarUrl + '&counterInfo_nickName=' + robotNickname + '&counterInfo_avatarUrl=' + robotAvatar + '&type=' + type
          console.log(url)
          wx.navigateTo({url})
        }
      }, 1000)
    },
    sendMessage () {
      wx.sendSocketMessage({
        data: JSON.stringify(
          {
            'type': 'connect',
            'avatarUrl': this.userInfo.avatarUrl
          }
        ),
        success: function (e) {
          console.log('发送消息')
        },
        fail: function (e) {
          console.log(e)
        }
      })
      this.countDown()
    }
  },
  onLoad: function (options) {
    // console.log(options);
    this.userInfo.nickName = options.nickName
    this.userInfo.avatarUrl = options.avatarUrl
    this.sendMessage()
  }
}
</script>

<style scoped>
page{
    width: 100%;
    height: 100%;
}
.content{
    position: absolute; 
    display: flex;
    justify-content: center;
    width : 100%;
    height : 100%;
    color: black;
    background-image: url("");
   background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;

}
.userinfo{
 position: absolute;
 top:20%;
 width: 100%;
 height:250rpx;
 text-align: center;

}
.userinfo-avatar {
 width: 200rpx;
  height:200rpx;
  margin: 20rpx auto;
  border-radius: 50%;
}

.countDownTime{
  position: absolute;
  top:50%;
  width: 100%;
  height:80rpx;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 35px;
}
.tips{
position: absolute;
 top:70%;
 width: 60%;
  height:50rpx;
  text-align: center;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 16px;
}
</style>
